<template>
    <div class="default-main">
        <el-card shadow="hover" header="数据概况">
            <div class="dashboard">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="money" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.totalEarnings }}元</div>
                                    <div class="dashboard-card-title">总收益</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="money" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.toDayTotalEarning }}元</div>
                                    <div class="dashboard-card-title">今日收益</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="order" width="40px" height="40px">
                                </el-col>
                                <el-col :span="9">
                                    <div class="dashboard-card-content">{{ data!.orderPrice }}</div>
                                    <div class="dashboard-card-title">总订单金额
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="ticket_money_fill" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.orderCompletedPrice }}</div>
                                    <div class="dashboard-card-title">完结订单金额

                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card shadow="hover" header="订单概况">
            <div class="dashboard">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="order_list" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.orderTotalNum }}</div>
                                    <div class="dashboard-card-title">总订单</div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="order_location_fill" width="40px" height="40px">
                                </el-col>
                                <el-col :span="9">
                                    <div class="dashboard-card-content">{{ data!.orderTodayTotalNum }}</div>
                                    <div class="dashboard-card-title">今日订单
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="order_yes" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.orderTodayCompletedTotalNum }}</div>
                                    <div class="dashboard-card-title">今日完成订单
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="inProgres" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.orderTodayServiceTotalNum }}</div>
                                    <div class="dashboard-card-title">服务中订单
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card shadow="hover" header="技师概况">
            <div class="dashboard">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="userCircle" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.technicianTotal }}</div>
                                    <div class="dashboard-card-title">技师总数</div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="onLine" width="40px" height="40px">
                                </el-col>
                                <el-col :span="9">
                                    <div class="dashboard-card-content">{{ data!.technicianWorkTotal }}</div>
                                    <div class="dashboard-card-title">当前在线技师人数
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="notOnLine" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.technicianNotWorkTotal }}</div>
                                    <div class="dashboard-card-title">休息技师人数
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" class="dashboard-card">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <img :src="inProgres" width="40px" height="40px">
                                </el-col>
                                <el-col :span="7">
                                    <div class="dashboard-card-content">{{ data!.technicianServiceTotal }}</div>
                                    <div class="dashboard-card-title">服务中技师
                                    </div>
                                </el-col>

                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card shadow="hover" header="代理商收入排名" v-if="adminInfo.is_show_city">
            <el-table border :data="data!.agentSort" style="width: 100%">
                <el-table-column prop="sort" label="排序"/>
                <el-table-column prop="avatar" label="头像">
                    <template #default="{row}">
                        <img :src="row.avatar" width="50px" height="50px">
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="名称"/>
                <el-table-column prop="mobile" label="手机号"/>
                <el-table-column prop="total" label="收益"/>
            </el-table>
        </el-card>
        <el-card shadow="hover" header="技师收入排名">
            <el-table border :data="data!.technicianSort" style="width: 100%">
                <el-table-column prop="sort" label="排序"/>
                <el-table-column prop="avatar" label="头像">
                    <template #default="{row}">
                        <img :src="row.avatar" width="50px" height="50px">
                    </template>
                </el-table-column>
                <el-table-column prop="technician_name" label="名称"/>
                <el-table-column prop="tel" label="手机号"/>
                <el-table-column prop="total" label="收益"/>
            </el-table>
        </el-card>
        <el-card shadow="hover" header="推广员收入排名">
            <el-table border :data="data!.extendSort" style="width: 100%">
                <el-table-column prop="sort" label="排序"/>
                <el-table-column prop="avatar" label="头像">
                    <template #default="{row}">
                        <img :src="row.avatar" width="50px" height="50px">
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="名称"/>
                <el-table-column prop="mobile" label="手机号"/>
                <el-table-column prop="total" label="收益"/>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import userCircle from '/@/assets/icons/user-circle.svg'
import onLine from '/@/assets/icons/on-line.svg'
import notOnLine from '/@/assets/icons/not-on-line.svg'
import inProgres from '/@/assets/icons/in-progress.svg'
import ticket_money_fill from '/@/assets/icons/ticket_money_fill.svg'
import order from '/@/assets/icons/order.svg'
import money from '/@/assets/icons/money.svg'
import order_list from '/@/assets/icons/order_list.svg'
import order_location_fill from '/@/assets/icons/order-location-fill.svg'
import order_yes from '/@/assets/icons/orderyes.svg'
import {reactive} from "vue";
import {index} from "/@/api/backend/dashboard";
import {useAdminInfo} from "/@/stores/adminInfo";

const adminInfo = useAdminInfo()
defineOptions({
    name: 'dashboard',
})
const data = reactive({
    totalEarnings: 0.00,
    toDayTotalEarning: 0.00,
    orderPrice: 0.00,
    orderCompletedPrice: 0.00,
    orderTotalNum: 0,
    orderTodayTotalNum: 0,
    orderTodayCompletedTotalNum: 0,
    orderTodayServiceTotalNum: 0,
    technicianTotal: 0,
    technicianWorkTotal: 0,
    technicianNotWorkTotal: 0,
    technicianServiceTotal: 0,
    agentSort: [],
    extendSort: [],
    technicianSort: [],
})
index().then(res => {
    data.totalEarnings = res.data.totalEarnings
    data.toDayTotalEarning = res.data.toDayTotalEarning
    data.orderPrice = res.data.orderPrice
    data.orderCompletedPrice = res.data.orderCompletedPrice
    data.orderTotalNum = res.data.orderTotalNum
    data.orderTodayTotalNum = res.data.orderTodayTotalNum
    data.orderTodayCompletedTotalNum = res.data.orderTodayCompletedTotalNum
    data.orderTodayServiceTotalNum = res.data.orderTodayServiceTotalNum
    data.technicianTotal = res.data.technicianTotal
    data.technicianWorkTotal = res.data.technicianWorkTotal
    data.technicianNotWorkTotal = res.data.technicianNotWorkTotal
    data.technicianServiceTotal = res.data.technicianServiceTotal
    data.agentSort = res.data.agentSort
    data.extendSort = res.data.extendSort
    data.technicianSort = res.data.technicianSort
})


</script>

<style scoped lang="scss">
.dashboard-card-content {
    font-size: 20px;
    color: #606266;
}

.el-card {
    margin-bottom: 20px;
}
</style>
